<template>
  <div class="goods">
    <div class="view-wrapper">
      <cube-scroll-nav
        :side="true"
        :data="goods"
        v-if="goods.length"
        :options="scrollOptions"
      >
        <!--
          具名插槽
          slot-scope="props"
          slot-scope 的值可以接收任何有效的可以出现在函数定义的参数位置上的 JavaScript 表达式。
        -->
        <template slot="bar" slot-scope="props">
          <cube-scroll-nav-bar
            direction="vertical"
            :labels="props.labels"
            :txts="barTxts"
            :current="props.current"
          >
            <!--
              1. :txts="props.txts" 相当于下面的 title
              2. 将txts替换成我们所需要的 barTxts
              3. 不使用默认插槽，使用心得插槽
            -->
            <!-- slot-scope 相当于函数 -->
            <template slot-scope="data">
              <div class="text">
                <!-- txt相当于刚刚tabTxts中的每一项 -->
                <support-ico
                  v-if="data.txt.type >= 1"
                  :size="3"
                  :type="data.txt.type"
                ></support-ico>
                <span>{{ data.txt.name }}</span>
                <span class="num" v-if="data.txt.count">
                  <bubble :num="data.txt.count"></bubble>
                </span>
              </div>
            </template>
          </cube-scroll-nav-bar>
        </template>
        <cube-scroll-nav-panel
          v-for="item in goods"
          :key="item.name"
          :label="item.name"
          :title="item.name"
          ref="cubesCrollNavPanel"
        >
          <ul class="food-wrapper">
            <li v-for="food in item.foods" :key="food.name" class="food-item">
              <!-- 商品图片 -->
              <div class="icon" @click="handleFoodDetail(food)">
                <img :src="food.icon" width="57" height="57" />
              </div>
              <!-- 商品内容 -->
              <div class="content">
                <h2 class="name">{{ food.name }}</h2>
                <!-- 介绍 -->
                <p class="desc">{{ food.description }}</p>
                <!-- 其他 -->
                <div class="extra">
                  <span class="count">月售：{{ food.sellCount }} 份</span>
                  <span class="rating">好评率：{{ food.rating }}%</span>
                </div>
                <!-- 价格 -->
                <div class="price">
                  <!-- 当前价格 -->
                  <span class="now">￥{{ food.price }}</span>
                  <!-- 之前价格 -->
                  <span class="old" v-show="food.oldPrice"
                    >￥{{ food.oldPrice }}</span
                  >
                </div>
                <!-- 商品加减 -->
                <div class="cart-control-wrapper">
                  <!-- cart-contol 组件-->
                  <cart-control :food="food" @add="onAdd"></cart-control>
                </div>
              </div>
            </li>
          </ul>
        </cube-scroll-nav-panel>
      </cube-scroll-nav>
    </div>

    <!-- 购物车 -->
    <div class="shop-cart-wrapper">
      <!-- 推荐使用连字符，不建议使用驼峰 -->
      <shop-cart
        ref="shopCart"
        :select-foods="selectFoods"
        :delivery-price="seller.deliveryPrice"
        :min-price="seller.minPrice"
      ></shop-cart>
    </div>

    <!-- 商品详情 -->
    <!-- <food :food="selectFood" ref="food"></food> -->
  </div>
</template>

<script type="text/ecmascript-6">

// 切换到tab时请求数据
import { getGoods } from "@/api/index"
import ShopCart from 'components/shop-cart/shop-cart'
import CartControl from 'components/cart-control/cart-control.vue';
import SupportIco from 'components/support-ico/support-ico.vue';
import Bubble from '../bubble/bubble.vue';
// import Food from "components/food/food"

export default {
	name: "goods",
	props: {
		data: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	components: {
		ShopCart,
		CartControl,
		SupportIco,
    Bubble,
    // Food
	},
	data() {
		return {
			goods: [],
			// current:"热销榜",
			scrollOptions: {
				click: false, // 点击事件派发，避免触发两次,阻止冒泡
				probeType: 3,
				directionLockThreshold: 0 // 滚动方向的绑定
      },
      selectFood:{}
		}
	},
	computed: {
		// 商家信息
		seller() {
			return this.data.seller
		},
		// 选中的商品
		selectFoods() {
			let ret = [];
			this.goods.forEach(good => {
				good.foods.forEach(food => {
					if (food.count) {
						ret.push(food)
					}
				})
			});
			return ret;
		},
		// 侧标导航的文本
		barTxts() {
			let ret = []
			this.goods.forEach(good => {
				const { type, name, foods } = good;
				let count = 0;
				foods.forEach(food => {
					count += food.count || 0
				})
				// 这里需要显示图标，名称，购买的数量
				ret.push({
					type,
					name,
					count
				})
			})
			return ret;
		}
	},
	methods: {
		// 设定一个钩子方法，当切换tab时更新数据
		fetch() {
			// 如果没有定义则 创建
			if (!this.fetched) {
        this.fetched = true;
        // 不会再后台再次获取、
				getGoods().then(goods => {
					this.goods = goods;
				});
			}
		},
		// cart-control 添加商品事件
		onAdd(el) {
			// 调用shopCart的drop方法
			this.$refs.shopCart.drop(el)
    },
    handleFoodDetail(food) {
      this.selectFood = food;
      // this.$refs.food.show();
      this._showFood()
      // 显示复制出来的购物车
      this._showShopCartSticky()
    },
    _showFood() {
      this.foodComp = this.foodComp || this.$createFood({
        $props: {
          food:"selectFood"
        },
        $events: {
          // 在商品详情返回时派发的事件
          leave:() =>{
            this._hideShopCartSticky()
          },
          // 添加商品时派发的时间
          add: (el) => {
            this.ShopCartStickyComp.drop(el)
          }
        }
      });
      this.foodComp.show();
    },
    // 显示复制的购物车组件
    _showShopCartSticky() {
      this.ShopCartStickyComp = this.ShopCartStickyComp ||
      this.$createShopCartSticky({
        $props:{
          selectFoods: "selectFoods",
          deliveryPrice: this.seller.deliveryPrice,
          minPrice: this.seller.minPrice,
          fold: true
        }
      });
      this.ShopCartStickyComp.show()
    },
    // 隐藏复制的购物车组件
    _hideShopCartSticky(){
      this.ShopCartStickyComp.hide()
    }
	}
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/mixin';
@import '~common/stylus/variable';

.goods {
	height: 100%;
	.view-wrapper {
		height: 100%;
		// 解决最后一个元素遮挡问题
		padding-bottom: 48px;
		box-sizing: border-box;
	}

	// 侧边导航样式
	>>> .cube-scroll-wrapper {
		background: #f3f5f7;

		// 吸附时背景色
		.cube-sticky {
			background-color: #fff;
		}
	}

	>>> .cube-scroll-nav-bar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 80px;
		background: #f3f5f7;
		padding: 0 12px;
		height: 54px;
		line-height: 14px;

		// 激活状态
		&.cube-scroll-nav-bar-item_active {
			background-color: #fff;
		}

		// 文本
		.text {
			position: relative;
			white-space: normal;
		}

		// 数量
		.num {
			position: absolute;
			right: -8px;
			top: -10px;
			font-size: 10px;
		}

		// 图片图标
		.support-ico {
			display: inline-block;
			vertical-align: top;
			margin-right: 4px;
		}
	}

	// 商品列表
	// 分类标题
	>>> .cube-scroll-nav-panel-title {
		padding-left: 14px;
		height: 26px;
		line-height: 26px;
		border-left: 2px solid #d9dde1;
		font-size: 12px;
		color: rgb(147, 153, 159);
		background: #f3f5f7;
	}

	.food-item {
		display: flex;
		margin: 18px;
		padding-bottom: 18px;
		border-bottom-1px(rgba(7, 17, 27, 0.1));

		&:last-child {
			border-none();
			margin-bottom: 0;
		}

		// s商品图片
		.icon {
			flex: 0 0 57px;
			margin-right: 10px;
		}

		// 商品内容
		.content {
			flex: 1;

			// 名称
			.name {
				margin: 2px 0 8px 0;
				height: 14px;
				line-height: 14px;
				font-size: $fontsize-medium;
				color: rgb(7, 17, 27);
			}

			// 商品介绍样式
			.desc, .extra {
				line-height: 10px;
				font-size: 10px;
				color: rgb(147, 153, 159);
			}

			.desc {
				line-height: 12px;
				margin-bottom: 8px;
			}

			.extra {
				.count {
					margin-right: 12px;
				}
			}

			// 价格样式
			.price {
				font-weight: 700;
				line-height: 24px;

				// 当前价格
				.now {
					margin-right: 8px;
					font-size: 14px;
					color: rgb(240, 20, 20);
				}

				// 原始价格
				.old {
					text-decoration: line-through;
					font-size: 10px;
					color: rgb(147, 153, 159);
				}
			}
		}

		// 加减组件
		.cart-control-wrapper {
			position: absolute;
			right: 0;
			bottom: 18px;
		}
	}
}

// 购物车
.shop-cart-wrapper {
	width: 100%;
	position: relative;
}
</style>
